@charset "UTF-8";
/* Roboto字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');

.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.icon-green {
  color: #25b99a;
}

.grey {
  color: grey;
}

body {
  background-color: #edf0f1;
  padding: 80px 0 0 0;
}

body,
input,
button {
  font-family: 'Roboto', sans-serif;
}

/* header部分 */
header {
  width: 100%;
  height: 80px;
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: #25b99a;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, .15);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

header input {
  width: 100%;
  height: 100%;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  padding-right: 60px;
  font-size: 15px;
  font-weight: 400;
  text-indent: 15px;
  color: rgba(255, 255, 255, .8);
  background-color: rgba(255, 255, 255, .2);
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .8);
}

input::-moz-input-placeholder {
  color: rgba(255, 255, 255, .8);
}

input::-ms-input-placeholder {
  color: rgba(255, 255, 255, .8);
}

header button {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  border-radius: 50%;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: #fff;
  cursor: pointer;
}

/* header部分 end */


/* container部分 */
.container {
  padding: 15px;
}

/* todo-incomplete部分 */
ul.todos {
  width: 100%;
}

li {
  position: relative;
  width: 100%;
  min-height: 50px;
  padding: 14px 100px 14px 14px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 22px;
  color: #333;
  background-color: #fff;
  box-shadow: 0px 1px 2px rgba(44, 62, 80, .1);
}

li:last-of-type {
  margin-bottom: 0;
}

.buttons {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.buttons button {
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  border: none;
  outline: none;
  background-color: #fff;
  cursor: pointer;
}

.buttons button:last-of-type::before {
  content: '';
  width: 1px;
  height: 30px;
  position: absolute;
  top: 10px;
  left: 0;
  background-color: #edf0f1;
}

.buttons button svg {
  transition: color .2s ease, background-color .2s ease;
}

.buttons .complete svg {
  width: 1.7em;
  height: 1.7em;
  border: 1.5px solid #25b99a;
  border-radius: 50%;
}

.buttons .remove:hover>.icon {
  color: red;
}

.buttons .complete:hover>.icon {
  color: #fff;
  background-color: #25b99a;
}

ul.todos#completed {
  position: relative;
  padding: 60px 0 0 0;
}

ul.todos#completed li {
  opacity: .4;
}

ul.todos#completed::before {
  content: '';
  width: 150px;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
}

ul.todos#incomplete:empty::after {
  content: '待办事项为空，请输入今日要完成的任务.';
  margin-top: 15px;
}

/* 注意，:empty选择器中标签如果存在空格，判定为非空！ */
ul.todos#completed:empty:after {
  content: '您尚未有已完成的任务~';
}

ul.todos#incomplete::after,
ul.todos#completed::after {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 14px;
  color: #aaa;
}
